<template>
  <div class="container">
    <Menu></Menu>
    <div class="box">
      <div>
        <button @click="enabled = !enabled">{{ enabled ? 'Stop' : 'Start' }} sharing my screen</button>
      </div>
      <video ref="video" muted autoplay controls class="h-100 w-auto"></video>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDisplayMedia } from '@vueuse/core';
import { ref, watchEffect } from 'vue';

import Menu from '@/components/Menu.vue';

const video = ref<HTMLVideoElement>();
const { stream, enabled } = useDisplayMedia();

watchEffect(() => {
  if (video.value) video.value.srcObject = stream.value!;
});
</script>

<style scoped>
@import './index.less';
</style>
